<template>

  <div class="_wz_cent_main _wz_positionAdd">
    <Form ref="formAdd" :model="formData" label-position="right" :label-width="100" :rules="ruleValidate">
      <FormItem label="所属机构">
        <div>{{!!formData.deptName ? formData.deptName : '--'}}</div>
      </FormItem>

      <FormItem label="上级部门" prop="parentUuid">
        <i-select v-model="formData.parentUuid" filterable placeholder="请选择上级部门" clearable>
          <template v-for="item in parentUuidList" >
            <Option :value="item.uuid" v-if="item.uuid != formData.uuid">{{ item.inOrgName }}</Option>
          </template>
        </i-select>
      </FormItem>

      <FormItem label="部门名称" prop="inOrgName">
        <i-input v-model="formData.inOrgName" placeholder="请填写部门名称" clearable/>
      </FormItem>

      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="$emit('closeFun', false)">取消</Button>
        <Button type="primary" @click="addSubmit">提交</Button>
      </div>
    </Form>
  </div>
</template>
<script>


import {getCurrentInstance,inject,nextTick,reactive, toRefs,toRef,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted, ref,defineComponent,toRaw,watch} from 'vue'
import { useRouter,useRoute } from "vue-router";

import { useMainStore } from '../../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex

//reactive
export default defineComponent({
  name: 'positionAdd',//组件名称
  components: {},//组件引用
  props: ["selectData"],
  setup (props,context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const router = useRouter();//路由跳转使用


    const state = reactive({
      parentUuidList: [],
      parentList: [],
      formData: {},
      ruleValidate: {
        inOrgName: [{ required: true, message: "请填写部门名称", trigger: "blur" }],
        // parentUuid: [{ required: true, message: "请选择上级部门", trigger: "blur" }],
      },
      formAdd : ref(),//添加表单 ref

    });







    //加载数据 页面初始化
    const loadData = ()=>{
      state.formData = props.selectData;
      state.formData.deptName = JSON.parse(sessionStorage.getItem('loginData')).userInfo.deptName;
      state.formData.deptUuid = JSON.parse(sessionStorage.getItem('loginData')).userInfo.deptUuid;
      state.formData.inOrgType = 1;
      console.log(state.formData,121212121)
      //加载  上级部门
      $axios.post(apiUrl.coreInOrgCoreInOrgList,{}).then((res) => {
        if(!!res){
          state.parentUuidList = res.data.data;
        }
      }).catch((err) => {
        console.log("失败", err)
      })
    }

    //添加
    const addSubmit = ()=>{
      state.formAdd.validate(async(valid) => {
        if(valid){
          $ViewUIPlus.Spin.show()
          $axios.post(apiUrl.coreInOrgCoreInOrgSaveOrUpdate,state.formData).then((res) => {
            $ViewUIPlus.Spin.hide()
            if (!!res) {
              $ViewUIPlus.Message.success('保存成功');
              context.emit('closeFun', true)
            }
          }).catch((err) => {
            console.log("失败", err)
          })
        }else{
          $ViewUIPlus.Message.error('请输入账号密码登录');
        }
      })
    }

    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted (() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")
      loadData();//加载数据 页面初始化
    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
      addSubmit,//添加
    }
  }
})


</script>
<style lang="less">
</style>
